.main{
    display: flex;
    // ~'样式'，不需要 less 帮我们进行运算
    // calc()  CSS3 提供的计算功能，该功能有个坑，运算符两边至少留一个空格。
    // height: ~'calc(100vh - 100rpx)';
    &_left{
        width: 182rpx;
        background-color: #f3f3f3;

        // scroll-view 滚动组件，官方要求竖屏滚动设置固定高度，否则部分机型无法滚动
        height: ~'calc(100vh - 100rpx)';

        // CSS的方式实现滚动在手机上会显得卡顿，所以小程序中不使用 CSS 实现滚动。
        // overflow-y: scroll;

        // 左侧文字
        &_item{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20rpx 0;
        }
        // 左侧选中状态
        .active{
            color:#eb4450;
            position: relative;
            background-color: #fff;
            // 选中状态前面的红色小方块
            &::before{
                content: "";
                width: 5rpx;
                height: 50rpx;
                // currentColor 是 CSS3 的特殊变量，代表当前文字的颜色
                background-color: currentColor;
                position: absolute;
                left: 0;
            }
        }
    }
    &_right{
        flex:1;
        height: ~'calc(100vh - 100rpx)';
        background-color: #fff;

        &_title{
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20rpx 0;
            &::before,&::after{
                content: '/';
                color:#999;
                margin:0 20rpx;
            }
        }

        // 列表结构
        &_list{
            display: flex;
            // 换行排序
            flex-wrap: wrap;
        }
        &_item{
            display: flex;
            // 把主轴方向改成竖着
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 33.33%;
            padding: 20rpx 0;
        }
        &_image{
            width: 120rpx;
            height: 120rpx;
        }
        &_text{
            margin: 10rpx;
            font-size: 22rpx;
        }
    }
}